<script setup>
  import LeftSide from './components/LeftSide/index.vue'
  import RightSide from './components/RightSide/index.vue';
  import Layout from './components/Layout/index.vue';
  import PageFooter from './components/PageFooter/index.vue'
import { ref } from 'vue';

  const data = ref(JSON.parse(localStorage.getItem('titleList'))||[])
  const selectedData = ref(data.value.find(item=>item.selected))

  const handleAddComponent = (name) => {
    data.value= data.value.map(item=>{return {...item,selected:false}})
    data.value.push({
      name:name,
      title1:'',
      title2:'',
      position:'left',
      size1:'16px',
      size2:'12px',
      weight:'bold',
      titleColor1:'#000',
      titleColor2:'#eee',
      backgroundColor:'#fff',
      selected:true,
      id:Date.now(),
      divider:true,
      more:false,
      icon:false
    })
    selectedData.value = data.value.find(item=>item.selected)
  }

  const handleTitleChange = (name,text)=>{
    data.value.find(item=>item.selected)[name]=text
  }

  const handleSelectedComponent = (id) => {
    data.value= data.value.map(item=>{return {...item,selected:false}})
    data.value.find(item=>item.id === id).selected=true
    selectedData.value = data.value.find(item=>item.selected)
  }

  const handleRadioChange = (name) => {
    selectedData.value[name] = !selectedData.value[name]
  }

  const handleDataSave = () =>{
    localStorage.setItem('titleList',JSON.stringify(data.value))
  }
</script>

<template>
  <div class="flex boxes">
    <LeftSide v-bind:data="data" @add-component="name=>handleAddComponent(name)"/>
    <Layout v-bind:data="data" @selectedComponent="(id)=>handleSelectedComponent(id)"/>
    <RightSide v-bind:data="selectedData" @titleChange="(name,text)=>handleTitleChange(name,text)" @radioChange="name=>handleRadioChange(name)"/>
  </div>
  <PageFooter @dataSave="handleDataSave" />
</template>

<style scoped>
  .boxes{
    width: 100%;
    height: 100%;
  }
</style>
